<template>
	<div :style="{backgroundImage:c}" class="content">
		<div class="app">
			<slider class="banner" interval="3000" auto-play="true" show-indicators="true" @change="changeColor">
				<div class="banner-frame" v-for="img in photoList">
					<image class="banner-image"   :src="img.thumbnail" @click="toLink(img)"></image>
				</div>
			</slider>
		</div>
	</div>

</template>
<script>
	const eeui = app.requireModule('eeui');
	import {
		getInfo
	} from '../../../../api/mch.js'
	import {
		list
	} from '../../../../api/ad.js'
	export default {
		name: 'swipersChange',
		data() {
			return {
				box: 'red',
				mch: {
					logo: '',
					name: ''
				},
				tagIds: [],
				background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
				photoList: [],
				color: [],
				c: '',
				imageList: [{
						src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
					},
					{
						src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
					},
					{
						src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
					}
				]
			}
		},
		props: [
			'content'
		],
		created() { // 在实例创建完成后被立即调用
			this.loadAd()
			this.loadInfo()
		},
		methods: {
			changeColor(e) {
				this.c = this.color[e.index]
			},
			searchClick() {
				const eeui = app.requireModule('eeui');
				eeui.openPage({
						url: 'root://pages/goods/search/index.js'
					},
					(result) => {

					}
				);
			},
			loadInfo() {
				getInfo(this.getGlobalData().mchId).then(res => {
					this.mch = res.data;

				});
			},

			loadAd() {
				var _this = this
				if (this.content.tagids != null) {
					this.tagIds = this.content.tagids.split(',');
					for (var i = 0; i < _this.tagIds.length; i++) {
						_this.tagIds[i] = parseInt(_this.tagIds[i])
					}
				}
				list({
					mchId: this.getGlobalData().mchId,
					tagIds: this.tagIds
				}).then(res => {
					res.data.data.forEach(element => {
						element.backgroundColor = "linear-gradient(to bottom, " + element.backgroundColor +
							',rgb(248,248,248))'
						_this.color.push(element.backgroundColor)
						element.thumbnail = this.thumbnail(element.thumbnail, 710, 350)
						this.c = this.color[0]
					});
					_this.photoList = res.data.data

				});
			},
			toLink(e) {
				if (e.hasOwnProperty('typeId') && !this.isNull(e.typeId)) {
				if (e.type === 0) {

						eeui.openPage({
							url: 'root://pages/goods/product/details.js',
							params: e.typeId
						})


				} else if (e.type === 9) {
					eeui.openPage({
						url: 'root://pages/index/wxPage/wxPage.js',
						params: e.typeId
					})

				} else if(e.type === 1){
                    eeui.openPage({
                        url: 'root://pages/goods/category/category.js',
                        params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    })

                } else if(e.type === 2){
                    eeui.openPage({
                        url: 'root://pages/member/detail/article.js',
                        params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    })


                }else if (e.type === 12) {
					if (e.path) {
						eeui.openPage({
							pageType: 'web',
							url: e.path
						})
					}
				}
				}
			},
			itemClick(res) {
				eeui.toast("点击项" + res)

			}
		},
		components: {},
	}
</script>

<style scoped>
	.content {
		width: 750px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.app {
		width: 750px;
	}

	.title_content {
		height: 100px;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding-left: 20px;
	}

	.search_input_content {
		width: 710px;
		height: 58px;
		/* border: 1px solid rgba(212, 215, 220, 1); */
		opacity: 0.95;
		border-radius: 50px;
		display: flex;
		margin-left: 20px;
		flex-direction: row;
		align-items: center;
		background-color: white;
		overflow: hidden;
		margin-top: 6px;
		margin-bottom: 20px;
	}

	.icon_search {
		margin-left: 20px;
	}

	.title_log {
		width: 56px;
		height: 56px;
	}

	.banner {
		display: flex;
		padding-right: 20px;
		width: 750px;
		border-radius: 16px;
		height: 350px;
	}

	.banner-frame {
		width: 710px;
		height: 10px;
		padding-left: 20px;
		padding-right: 20px;
		border-radius: 16px;
		position: relative;
	}

	.icon {
		width: 50px;
		height: 50px;
		color: rgba(42, 42, 54);
		opacity: 0.3;
	}

	.banner-image {
		width: 710px;
		height: 350px;
		border-radius: 16px;
	}

	.page_header_title {
		font-size: 32px;
		margin-left: 10px;
		color: white;
		font-weight: 700;
	}
</style>
